<template>
  <view >
    <view class="fixed-box">
      <view style="background: linear-gradient(180deg, #FFDFE8 0%, rgba(255, 204, 218, 0) 70%);">
        <u-gap height="130"/>
        <view class="tn-flex tn-flex-row-between tn-padding " >
          <view class="tn-flex">
            <tab :list="tabList" :tab-index="tabIndex" @change="changeTab"></tab>
          </view>
          <view class="tn-flex tn-text-sm" v-if="tabIndex===0" >
            <text v-if="isEditingFollowList" @click="cancelEditFollowList">退出</text>
            <text v-else @click="toEditFollowList">编辑</text>
          </view>
          <view class="tn-flex tn-text-sm" v-else @click="clearAllHistory">清除历史</view>
        </view>
      </view>
    </view>

    <u-gap height="240"/>

    <!-- 追剧列表   -->
    <view  v-if="tabIndex===0" class="tn-margin-xs">
      <empty-list v-if="followList.length==0"/>
      <u-grid col="3" align="left" :border="false" >
        <u-grid-item
          v-for="(item,index) in followList"
          :key="index"
          @click="clickTv(item,index)"
          :custom-style="{padding:'5px 0'}"
        >
          <view >
            <view class="image-box">
              <image :src="item.tv_image|handlePic" class="dm-tv-image-bg"/>
              <view v-if="isEditingFollowList" class="select-check-box" >
                <text class="tn-text-xxl tn-icon-success-circle-fill dm-main-text-color" v-if="item.selected"/>
                <text class="tn-text-xxl tn-icon-circle dm-color-gray" v-else />
              </view>
            </view>
            <view class="tn-flex tn-flex-direction-column" >
              <view class="tn-text-bold tn-text-ellipsis" style="width: 110px;">{{item.tv_name}}</view>
              <view class="tn-text-sm dm-color-gray">观看至{{item.series}}集</view>
            </view>
          </view>
        </u-grid-item>
      </u-grid>
    </view>
    <!-- 历史列表   -->
    <view class="" v-else>
      <empty-list v-if="historyList.length==0"/>
      <column-video-list :video-list="historyList" is-watching-page="true" @followSuccess="followSuccess"/>
    </view>


    <!-- 删除选项栏   -->
    <view class="delete-selection tn-flex" v-if="isEditingFollowList">
      <view class="dm-main-text-color tn-text-bold tn-flex tn-flex-row-center tn-flex-col-center" style="width: 50%" @click="selectAll">全选</view>
      <view class="tn-flex tn-flex-row-center tn-flex-col-center">|</view>
      <view class="dm-color-gray tn-text-bold tn-flex tn-flex-row-center tn-flex-col-center" style="width: 50%" @click="batchDeleteFollowList">删除</view>
    </view>

  </view>
</template>

<script>
import tab from "@/components/tab/tab.vue";
import common_mixin from '@/libs/mixin/common_mixin.js'
import EmptyList from "../../../components/empty-list/empty-list.vue";
import ColumnVideoList from "../../../components/column-video-list/column-video-list.vue";
import {toast} from "../../../utils/utils";
import {batchDeleteFollow} from "../../../api/api";
import UGap from "../../../uni_modules/uview-ui/components/u-gap/u-gap.vue";

export default {
  mixins: [common_mixin],
  components: {
    UGap,
    ColumnVideoList,
    EmptyList,
    tab
  },
  data() {
    return {
      tabIndex:0,
      tabList:[{name:"在追"},{name:"观看历史"}],
      page: 1,
      followList: [],
      historyList: [],
      isEditingFollowList:false
    }
  },
  onLoad(option) {
    console.log("option:",option)
    if(option.tabIndex) {
      this.tabIndex = option.tabIndex
    }
    console.log("onLoad")
  },
  onShow() {
    this.page=1;
    // this.tabIndex=0;
    this.followList=[]
    console.log("onShow")
    this.loadData()
  },
  onReachBottom() {
    this.loadData();
  },
  methods: {
    followSuccess(index) {
      this.historyList[index].is_follow=true
    },
    toEditFollowList() {
      this.isEditingFollowList=true;
      this.followList.forEach((list)=>{list.selected=false})
      console.log(this.followList)
    },
    cancelEditFollowList() {
      this.isEditingFollowList=false
    },
    changeTab(idx) {
      this.tabIndex = idx;
      this.page=1;
      if (this.tabIndex===0) {
        this.followList=[]
      } else {
        this.historyList =[]
      }
      this.loadData();
    },
    async loadData() {
      if (this.tabIndex===0) { // 追剧列表
        let params ={page:this.page};
        let res = await this.$api.getFollowList(params)
        this.followList = this.followList.concat(res.data);
        this.page++;
      } else {
        let params ={page:this.page};
        let res = await this.$api.getHistoryList(params)
        this.historyList = this.historyList.concat(res.data);
        this.page++;
      }
    },
    selectAll() {
      this.followList.forEach((list)=>{list.selected=true})
      this.$forceUpdate()
    },
    async clearAllHistory() {
      let that = this;
      uni.showModal({
        content: '是否清除所有历史记录？',
        success: (res) => {
          if(res.confirm) {
            this.$api.clearAllHistory()
            toast('清除成功');
            that.historyList=[];
          } else {
            console.log("已取消")
          }
        }
      })
    },
    batchDeleteFollowList() {
      const selectedIds = this.followList
        .filter(item => item.selected)
        .map(item => item.tv_id);
      if (selectedIds.length===0) {
        toast('请至少选择一部剧再操作');
        return
      }
      uni.showModal({
        content: '是否移除所选追剧？',
        success: (res) => {
          if (res.confirm) {
            this.toBatchDeleteFollow(selectedIds)
          } else {
            console.log("已取消")
          }
        }
      })
    },
    async toBatchDeleteFollow (selectedIds) {
      let params = {ids:selectedIds}
      await this.$api.batchDeleteFollow(params)
      this.isEditingFollowList=false
      toast('移除成功！');
      this.changeTab(this.tabIndex);
    },
    clickTv(item,index=0) {
      if (this.isEditingFollowList) {
        this.followList[index].selected=!this.followList[index].selected
        this.$forceUpdate();
        return
      }
      this.toVideoDetail(item)
    },
  }
}
</script>

<style lang="scss" scoped>
.top-background {
  background: linear-gradient(180deg, #FFDFE8 0%, rgba(255, 204, 218, 0) 80%);
  width: 100%;
}
.delete-selection{
  height: 55px;
  display: flex;
  width: 100%;
  position: fixed;
  bottom: 0;
  z-index: 1003;
  background-color: #EFEFEF;
}
.select-check-box{
  right: 2px;
  position: absolute;
  top: 2px;
}
.image-box{
  position: relative;
}
.fixed-box{
  width: 100%;
  position: fixed;
  top: 0px;
  z-index:99;
  background: white;
}
</style>
